<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>研究生</el-breadcrumb-item>
      <el-breadcrumb-item>新建文章</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- Form -->
      <el-button type="primary" @click="dialogFormVisible = true" class="send"
        >上传</el-button
      >
      <!-- 弹出框 -->
      <el-dialog title="新增文章" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章封面" :label-width="formLabelWidth">
            <!-- 上传文件 -->
            <el-upload
              class="upload-demo"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="handleUpload"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createArticle">确 定</el-button>
        </div>
      </el-dialog>

      <div class="edit-editor">
        <!-- 编辑器 -->
        <editor-bar
          v-model="detail"
          :isClear="isClear"
          @change="change"
        ></editor-bar>
      </div>
    </el-card>
  </div>
</template>

<script>
import EditorBar from "../../components/wangEnduit";
import axios from "axios";
import { ReqCreateArticle } from "../../request/index.js";
export default {
  components: { EditorBar },
  name: "secondaryClassification",
  data() {
    return {
      test: "",
      isClear: false,
      detail: "", //富文本
      value: "",
      id1: "",
      title1: "",
      dialogFormVisible: false,
      form: {
        name: "",

        delivery: false,
        type: [],
      },
      formLabelWidth: "120px",
      //更新文章所需参数

      tempRowFile: {},
    };
  },
  methods: {
    //确认后关闭弹窗并传递数据
    createArticle() {
      this.dialogFormVisible = false;
      ReqCreateArticle({
        title: this.form.name,
        cover: this.tempRowFile,
        content: this.value,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "新建成功",
            type: "success",
          });
          this.rowId = "";
          this.tempRowFile = {};
        } else {
          this.$message({
            showClose: true,
            message: "新建失败",
            type: "warning",
          });
        }
      });
    },

    handleUpload(file, fileList) {
      this.tempRowFile = file.file;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //监听内容变化
    change(val) {
      this.value = val;
      console.log(this.value);
    },
  },
};
</script>
<style scoped>
/* 上传按钮 */
.send {
  float: right;
  margin-top: -15px;
  padding: 10px 15px;
  font-size: 14px;
}
.edit-editor {
  margin-top: 30px;
}
.edit-editor >>> .text {
  height: 550px;
}
.edit-editor >>> .w-e-toolbar {
  height: 50px;
  align-items: center;
}
.el-card__body {
  margin: 35px 20px;
}
</style>
